<!--
 我的订单首页
 Created by xunyin
 CopyRight 讯音云商（厦门）科技有限公司  www.tonetn.com
-->
<template>
	<view class="orderListBox">
		<view v-if="$store.getters.token || userInfo.uid">
			<view class="navBox">
				<view :class="[navStart == 0 ? 'selectNav' : '' ,'nav']" @click="setNavStart(0)">
					全部
					<view class="icon"></view>
				</view>
				<view :class="[navStart == 1 ? 'selectNav' : '' ,'nav']" @click="setNavStart(1)">
					未支付
					<view class="icon"></view>
				</view>
				<view :class="[navStart == 2 ? 'selectNav' : '' ,'nav']" @click="setNavStart(2)">
					进行中
					<view class="icon"></view>
				</view>
				<view :class="[navStart == 3 ? 'selectNav' : '' ,'nav']" @click="setNavStart(3)">
					已完成
					<view class="icon"></view>
				</view>
			</view>

			<view class="orderList" v-if="orderList.length != 0">
				<view class="orderBox" v-for="item in orderList" :key="item.id">
					<view class="topBox">
						<text style="font-size: 25rpx;">服务时间: {{item.teaServerTime}}<!-- {{item.startTime}}-{{item.endTime}} --></text>
						<text class="start" v-if="item.orderStatus == 0">
							未支付
						</text>
						<text class="start" v-if="item.orderStatus == 1">
							待使用
						</text>
						<text class="start" v-if="item.orderStatus == 2">
							服务中
						</text>
						<text class="start" v-if="item.orderStatus == 3">
							已取消
						</text>
						<text class="start" v-if="item.orderStatus == 4">
							已完成
						</text>
						<text class="start" v-if="item.orderStatus == 5">
							已退款
						</text>																																	
					</view>
					<view class="shopBox">
						<image :src="item.icon" mode=""></image>
						<view class="nameBox">
							<view class="name">
								{{item.storeName}}
							</view>
							<view class="box">
								{{item.storeRoomName}}
							</view>
							<view class="money">
								<text class="icon">￥</text><text class="num">{{item.orderMondey}}</text>元
							</view>
						</view>
					</view>
					<view class="buttonBox" v-if="item.orderStatus == 0">
						<view class="button one" @click="payOrder(item.id)">
							<image src="../../static/images/zhifu.png" mode=""></image>
							立即支付
						</view>
						<view class="button two" @click="cancelOrder(item.id)">
							取消订单
						</view>
					</view>
					<view class="buttonBox" v-if="item.orderStatus == 1||item.orderStatus == 2">
						<view class="button one" @click="openDoor(item.id)">
							<image src="../../static/images/zhifu.png" mode=""></image>
							开门
						</view>
						<view class="button one" style="margin-left: 25rpx;" @click="repeatOrder(item.id)">
							续订  
						</view>
						<view class="button two" @click="cancelOrder(item.id)" v-if="item.orderStatus == 1">
							取消订单
						</view>						
					</view>
				</view>
			</view>

			<view class="nullOrder" v-else>
				<image src="../../static/empty/empty_gift.png" mode=""></image>
			</view>

			<view class="bottomText">
				没有更多了哟~
			</view>
	   </view>		
	   <Authorization v-else />			
	</view>
</template>

<script>
	
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	import { getUserInfo, getMenuUser, wxappAuth, bindingPhone, wxappBindingPhone, wxappGetUserInfo } from '@/api/user'
	import { isWeixin, VUE_APP_RESOURCES_URL, parseQuery, getProvider } from '@/utils'	
	import {
		OrderList
	} from "../../utils/request/gather.js"
	import Authorization from '@/pages/authorization/index'
	import { getOrderListByUserId,immediatePay,cancelOrderPay,getRepeatOrder } from '@/api/order';
	import {weappPay } from "@/libs/wechat";
	import { geStoreRoomDetail } from '@/api/store';
	
	//import { openDoorStoreOrStoreRoom } from '@/api/mtstore';
	
	export default {
 	    components: {
		  Authorization,
	    },	 		
		data() {
			return {
				navStart: 0, // 导航栏状态 (0:全部,1:未支付,2:进行中,3:已完成)
				orderList: [], // 订单列表
				token: uni.getStorageSync("token"), // token
			}
		},
		computed: mapGetters(['location','userInfo']),
		created() {
			this.setNavStart(0); // 默认选择全部
		},
		onShow() {
			console.log("latitude:"+this.location.latitude)
			console.log("longitude:"+this.location.longitude)
			this.setNavStart(0); // 默认选择全部	
		},
		methods: {
			...mapMutations(['updateAuthorizationPage']),			
			goPage(url) { // 跳转页面
/* 				if (!this.token) {
					uni.navigateTo({
						url: "/pages/Login/login"
					})
				} */
				uni.navigateTo({
					url
				})
			},
			setNavStart(start) { // 设置导航栏状态
			
				this.navStart = start
				
				this.getOrderList(start) // 获取订单列表
			},
			
			// 获取订单列表
			getOrderList(start) { 
			
				let that = this
				let param = {
					startFlag:start
				}				
/* 				OrderList(start).then(res => {
					that.orderList = res.data.data
				}) */
				
				getOrderListByUserId(param).then(res => {
					that.orderList = res.data
				})
			},
/* 			openDoor(orderId,switchId){ // 开门
				console.log("orderId:"+orderId)
				console.log("switchId:"+switchId)
				let param = {
					orderId:orderId,
					switchid:switchId
				};
				openDoorStoreOrStoreRoom(param).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			
			}, */
			
			// 开门
			openDoor(orderId){
				
				let paramData = {
					orderId:orderId,
					operFlag:1
				};
				getRepeatOrder(paramData).then(res => {
						
						var orderList = res.data
						if (orderList.length <= 0) {
							
							uni.showToast({
							  title: '订单服务时间未到，请稍后',
							  //icon: 'success',
							  icon: 'none',
							  duration: 5000,
							})
							
						}else{
							
							if (orderList.length == 1) {
								
								var shareOrderInfor = orderList[0];
								console.log("latitude:"+this.location.latitude)
								console.log("longitude:"+this.location.longitude)
								let paramData = {
									latitude: this.location.latitude, //纬度
									longitude: this.location.longitude, //经度
									storeRoomId: shareOrderInfor.storeRoomId
								};
								
								// 根据订单关联的房间Id,查询房间信息
								geStoreRoomDetail(paramData).then(res1 => {
									var mtStoreRoomInfor = res1.data;
									let icons = [];
									for (let i = 0; i < mtStoreRoomInfor.iconList.length; i++) {
										icons.push(mtStoreRoomInfor.iconList[i].icon)
									}
									var url = '/pages/subPack/orderList/detail';
									
/* 									url = url+'?teaId='+shareOrderInfor.storeId + '&teaChildId='+shareOrderInfor.storeRoomId + '&storeRoomName='+mtStoreRoomInfor.storeRoomName +
										'&recommended='+mtStoreRoomInfor.recommended + '&icons=' + icons + '&address=' + mtStoreRoomInfor.address + '&distance=' + mtStoreRoomInfor.distance +
										'&phone=' + mtStoreRoomInfor.phone +'&images='+mtStoreRoomInfor.images+'&price='+mtStoreRoomInfor.price+'&image='+mtStoreRoomInfor.icon +
										'&storeName=' + shareOrderInfor.storeName+'&parentOrderId='+shareOrderInfor.id+'&latitude='+mtStoreRoomInfor.latitude+'&longitude='+mtStoreRoomInfor.longitude */
										
									url = url+'?teaId='+shareOrderInfor.storeId + '&teaChildId='+shareOrderInfor.storeRoomId + '&storeRoomName='+mtStoreRoomInfor.storeRoomName +
										'&recommended='+mtStoreRoomInfor.recommended + '&icons=' + icons + '&address=' + mtStoreRoomInfor.address + '&distance=' + mtStoreRoomInfor.distance +
										'&phone=' + mtStoreRoomInfor.phone +'&images='+mtStoreRoomInfor.images+
										'&price='+mtStoreRoomInfor.repeatPrice+'&image='+mtStoreRoomInfor.icon +
										'&repeatPrice='+mtStoreRoomInfor.repeatPrice +'&isRepeat=1'+'&startTimeNum='+mtStoreRoomInfor.startTimeNum+
										'&storeName=' + shareOrderInfor.storeName+'&parentOrderId='+shareOrderInfor.id+'&orderId='+shareOrderInfor.id+'&timeInterval='+shareOrderInfor.timeInterval+
										'&latitude='+mtStoreRoomInfor.latitude+'&longitude='+mtStoreRoomInfor.longitude+'&teaServerTime='+shareOrderInfor.teaServerTime	
										
									uni.navigateTo({
										url
									})			
								})
								
							}else{
								
								let url = '/pages/orderList/orderList';
								uni.switchTab({
									url
								})
							}	
						}	
					})

				
/* 				var url = '/pages/subPack/orderList/detail';
				url = url+'?teaId='+shareOrderInfor.storeId + '&teaChildId='+shareOrderInfor.storeRoomId + '&storeRoomName='+mtStoreRoomInfor.storeRoomName +
					'&recommended='+mtStoreRoomInfor.recommended + '&icons=' + icons + '&address=' + mtStoreRoomInfor.address + '&distance=' + mtStoreRoomInfor.distance +
					'&phone=' + mtStoreRoomInfor.phone +'&images='+mtStoreRoomInfor.images+'&price='+mtStoreRoomInfor.price+'&image='+mtStoreRoomInfor.icon +
					'&storeName=' + shareOrderInfor.storeName+'&parentOrderId='+shareOrderInfor.id+'&orderId='+shareOrderInfor.id+'&timeInterval='+shareOrderInfor.timeInterval+
					'&latitude='+mtStoreRoomInfor.latitude+'&longitude='+mtStoreRoomInfor.longitude+'&teaServerTime='+shareOrderInfor.teaServerTime
				uni.navigateTo({
					url
				}) */
			},
			repeatOrder(orderId){ // 续订
				console.log("this.userInfo:"+this.userInfo)
				console.log("this.userInfo.uid:"+this.userInfo.uid)
				if(this.userInfo.uid === undefined){
					uni.showToast({
					  title: '未查询到已预定订单，可选择房间预定哦',
					  //icon: 'success',
					  icon: 'none',
					  duration: 5000,
					})
				}else{
					
					let paramData = {
						orderId:orderId,
						operFlag:2
					};
					getRepeatOrder(paramData).then(res => {
						var orderList = res.data
						if (orderList.length <= 0) {
							uni.showToast({
							  title: '未查询到已预定订单，可选择房间预定哦',
							  //icon: 'success',
							  icon: 'none',
							  duration: 5000,
							})
						}else{
							
							if (orderList.length == 1) {
								
								var shareOrderInfor = orderList[0];
								console.log("latitude:"+this.location.latitude)
								console.log("longitude:"+this.location.longitude)
								let paramData = {
									latitude: this.location.latitude, //纬度
									longitude: this.location.longitude, //经度
									storeRoomId: shareOrderInfor.storeRoomId
								};
								
								// 根据订单关联的房间Id,查询房间信息
								geStoreRoomDetail(paramData).then(res1 => {
									
									var mtStoreRoomInfor = res1.data;
									let icons = [];
									for (let i = 0; i < mtStoreRoomInfor.iconList.length; i++) {
										icons.push(mtStoreRoomInfor.iconList[i].icon)
									}
									
									var url = '/pages/subPack/homePage/details';
									
									url = url+'?teaId='+shareOrderInfor.storeId + '&teaChildId='+shareOrderInfor.storeRoomId +
										'&storeRoomName='+mtStoreRoomInfor.storeRoomName +
										'&recommended='+mtStoreRoomInfor.recommended + '&icons=' + icons + 
										'&address=' + mtStoreRoomInfor.address + '&distance=' + mtStoreRoomInfor.distance +
										'&phone=' + mtStoreRoomInfor.phone +'&images='+mtStoreRoomInfor.images+'&price='+mtStoreRoomInfor.repeatPrice+
										'&image='+mtStoreRoomInfor.icon +
										'&repeatPrice='+mtStoreRoomInfor.repeatPrice +'&isRepeat=1'+'&startTimeNum='+mtStoreRoomInfor.startTimeNum+
										'&storeName=' + shareOrderInfor.storeName+'&parentOrderId='+shareOrderInfor.id+'&latitude='+mtStoreRoomInfor.latitude+'&longitude='+mtStoreRoomInfor.longitude
										
									uni.navigateTo({
										url
									})			
								})
								
							}else{
								
								let url = '/pages/orderList/orderList';
								uni.switchTab({
									url
								})
							}	
						}	
					})
				}
				
			},			
			cancelOrder(orderId){
				let param = {
					orderId:orderId
				}
				cancelOrderPay(param).then(res => {
					if (res.status == 200) {
						uni.showToast({
						  title: res.data,
						  //icon: 'success',
						  icon: 'none',
						  duration: 5000,
						})
						this.setNavStart(0);
					}else{
						uni.showToast({
						  title: res.data,
						  //icon: 'success',
						  icon: 'none',
						  duration: 5000,
						})
						this.setNavStart(0);
					}	
				})	
			},	
			payOrder(orderId){
				let param = {
					orderId:orderId
				}
				immediatePay(param).then(res => {
						var payment = res.data.payment;
						var url = "/pages/orderList/orderList";
						if (res.status == 200) {
							if (payment.payMoney0Success === '1') {
								uni.showToast({
								  title: '支付成功',
								  icon: 'success',
								  duration: 5000,
								})
								this.setNavStart(0);
								//this.$router.go(0);
/* 								uni.switchTab({
									url
								}) */
								//this.$yrouter.push({ path: "/pages/orderList/orderList"});
								return false;	
							}else{
								console.log("payment:"+JSON.stringify(payment));
								weappPay(payment).finally(() => {
									this.setNavStart(0);
									//this.$router.go(0);
									//resolve()
/* 									uni.switchTab({
										url
									}) */	
									//goOrderDetails(data.result.orderId, type)
								}).then(res => {
									this.setNavStart(0);
									//this.$router.go(0);
/* 									uni.switchTab({
										url
									})	 */
									// #ifdef MP-WEIXIN
									//subscribeMessage()
									// #endif
								})
							}

						}else{
							uni.showToast({
							  title: "支付失败",
							  icon: "none",
							  duration: 2000,
							});
							this.setNavStart(0);
							//this.$router.go(0);
/* 							uni.switchTab({
								url
							}) */
						}
						
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f8f8fa;
	}
</style>

<style lang="scss" scoped>
	.orderListBox {
		width: 100%;
		height: auto;
		padding-bottom: 20rpx;

		.navBox {
			width: 100%;
			padding: 20rpx 0;
			background: #fff;
			display: flex;
			border-top: #f6f6f6 2rpx solid;

			.nav {
				flex: 1;
				text-align: center;
				font-size: 26rpx;
				color: #333;
				position: relative;

				.icon {
					display: none;
				}
			}

			.selectNav {
				color: #b28159;

				.icon {
					width: 90rpx;
					height: 6rpx;
					background: #b18059;
					position: absolute;
					display: block;
					bottom: -20rpx;
					left: 50%;
					transform: translate(-50%, 0);
					border-radius: 50rpx;
				}
			}
		}

		.orderList {
			width: 100%;
			height: auto;

			.orderBox {
				width: 90%;
				height: auto;
				margin: 20rpx auto 0;
				padding-bottom: 25rpx;
				border-bottom: 2rpx solid #f2f2f2;

				.topBox {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					color: #8f8f8f;

					.start {
						color: #eb542b;
					}
				}

				.shopBox {
					width: 100%;
					height: auto;
					margin-top: 20rpx;
					background: #f5f5f5;
					display: flex;
					border-radius: 15rpx;

					image {
						width: 180rpx;
						height: 180rpx;
					}

					.nameBox {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-left: 25rpx;

						.name {
							font-size: 32rpx;
							font-weight: bold;
						}

						.box {
							font-size: 28rpx;
							color: #828282;
							margin-top: 10rpx;
						}

						.money {
							color: #e47823;
							font-size: 24rpx;
							margin-top: 10rpx;

							.icon {
								font-size: 20rpx;
							}

							.num {
								font-size: 36rpx;
							}
						}
					}
				}

				.buttonBox {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: flex-end;
					margin-top: 20rpx;

					.button {
						width: 200rpx;
						padding: 10rpx 0;
						border-radius: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}

					.one {
						background: linear-gradient(to right, #eed5b1, #b18058);
						color: #fff;
					}

					.two {
						border: #666666 4rpx solid;
						color: #666666;
						margin-left: 25rpx;
					}
				}
			}
		}

		.nullOrder {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 200rpx;
		}

		.bottomText {
			margin: 30rpx auto 0;
			text-align: center;
			color: #333;
			font-size: 30rpx;
		}
	}
</style>